<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 通过 "." 指明一些指令后缀, 不同后缀封装了不同的处理操作 -> 简化代码 -->
    <!-- 按键修饰符 @keyup.enter -> 键盘回车监听 -->
    <!-- v-model修饰符 v-model.trim -> 去除首尾空格/v-model.number 转数字 -->
    <!-- 事件修饰符 @事件名.stop -> 防止冒泡/事件名.prevent -> 阻止默认行为 -->

    <div id="app">
        <input v-model.trim="username"  type="text" name="" id="">
        <input v-model.number="age"  type="text" name="" id="">
        <button v-on:click="submit">提交</button>


        <a @click.prevent href="baidu.com">阻止a标签的跳转</a>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                username: "123",
                age: 0
            },
            methods: {
                submit (){
                    alert(this.age)
                }
            }
        })
    </script>

</body>
</html>